<template>
  <div class="demo">
    <div>demo 数据{{demoData}}</div>
    <div>demo amount(filter 使用说明) --------{{demoAmount | amount}}</div>
    <div @click="showToast">测试Toast</div>
    <div @click="showModal">调用动态莫太框</div>
    <div @click="goBack">返回</div>
    <input :value="idCard" style="width:3rem;height:0.6rem;border:1px solid;" />
    <div class="test-flex">
      <div class="flex-block flex-1">
        <div>haha</div>
        <div>haha2</div>
        <div>haha3</div>
        <div @click="openLocation">打开地图</div>
      </div>
      <div class="flex-block"></div>
      <div class="flex-block"></div>
      <div class="flex-block"></div>
    </div>
  </div>
</template>

<script>
  import {
    mapActions,
    mapGetters
  } from 'vuex';
  import demoComponent from './demoComponent';
  export default {
    name: 'index',
    data() {
      return {
        idCard: ''
      }
    },
    async asyncData({
      store,
      route
    }) {
      console.log("I am demo async data fetching 1", )
    },
    computed: {
      ...mapGetters('demoModule/demo', [
        'demoData',
        'demoAmount'
      ])
    },
    methods: {
      ...mapActions('demoModule/demo', [
        'getDemoData'
      ]),
      goBack() {
        this.$router.go(-1);
      },
      showToast() {
        this.$toast({
          message: '这是一个友好的提示',
          duration: 1500
        })
      },
      showModal() {
        this.$modal({
          template: demoComponent, //莫太框中加载的模板
          params:{//莫太框中传递的数据
            test:'23',
            name:'xiaohong'
          }
        })
      },
      openLocation(){
        
      }
    },
    mounted() {
      console.log("-------I am being mounted 2----------")
      this.getDemoData({
          page: 1,
          perPage:30,
          type:'RECOMMENDATION'
      });
    }
  };
</script>

<style lang="scss" scoped>
.demo > div {
  margin-top: 0.2rem;
}

.test-flex {
  display: flex;
  width: 3.5rem;
  border: 0.01rem solid;
  height: 1rem;
  margin: 0 auto;
  .flex-block {
    flex: 1;
    border: 1px solid;
  }
  .flex-1 {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
  }
}
</style>


